<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>智慧养老信息化服务平台</title>
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/datagrid.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/demo/demo.css">
    <style type="text/css">
        body {
            background-position: right bottom;
            background-repeat: no-repeat;
            background-color: #fffff8;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            height: 640px;
            width: 1300px;
        }
    </style>


</head>
<body>
<!--按钮组-->
<div id="datagrid_toolbar">
    <a href="#">删除选中</a>
    <a href="#">添加</a>
    <input type="text" id="keyword" name="keyword"/>
</div>
<!--按钮组-->
<div id="dialog_organ_add_buttons">
    <a href="#">添加</a>
</div>

<div id="dialog_organ_modify_buttons">
    <a href="#">修改</a>
</div>

<!--展示机构的table-->
<table id="datagrid_organ">
    <thead>
    <tr>
        <th data-options="field:'h',checkbox:true"></th>
        <th data-options="field:'mid',width:120">ID</th>
        <th data-options="field:'mname',width:130">机构名称</th>
        <th data-options="field:'marea',width:130">所属区域</th>
        <th data-options="field:'mdate',width:150">运营时间</th>
        <th data-options="field:'mtel',width:150">对外服务电话</th>
        <th data-options="field:'mlevel',width:150">机构等级</th>
        <th data-options="field:'mtype',width:150">机构类型</th>
        <th data-options="field:'mcount',width:200,sortable:true">总床位数</th>
        <th data-options="field:'hehe',width:200,formatter:organ.op_fmt">操作</th>
    </tr>
    </thead>
</table>
<!--添加的dialog-->
<div id="dialog_organ_add" align="center">
    <form id="form_organ_add" action="/organ/addOrgan" method="post">
        <table>
            <tr>
                <th>ID</th>
                <th><input type="text" name="mid" readonly></th>
                <th>机构名称</th>
                <th><input type="text" name="mname"></th>
            </tr>
            <tr>
                <th>所属区域</th>
                <th><input type="text" name="marea"></th>
                <th>运营时间</th>
                <th><input type="text" name="mdate" id="add_mdate"></th>
            </tr>
            <tr>
                <th>对外服务电话</th>
                <th><input type="text" name="mtel" id="add_mtel"></th>
                <th>机构等级</th>
                <th><input type="text" name="mlevel"></th>
            </tr>
            <tr>
                <th>机构类型</th>
                <th><input type="text" name="mtype"></th>
                <th>总床位数</th>
                <th><input type="text" name="mcount" id="add_mcount"></th>
            </tr>
        </table>
    </form>
</div>
<!--修改的dialog-->
<div id="dialog_organ_modify" align="center">
    <form id="form_organ_modify" action="/organ/modifyOrgan" method="post">
        <table>
            <tr>
                <th>ID</th>
                <th><input type="text" name="mid" readonly></th>
                <th>机构名称</th>
                <th><input type="text" name="mname"></th>
            </tr>
            <tr>
                <th>所属区域</th>
                <th><input type="text" name="marea"></th>
                <th>运营时间</th>
                <th><input type="date" name="mdate" id="modify_mdate"></th>
            </tr>
            <tr>
                <th>对外服务电话</th>
                <th><input type="text" name="mtel" id="modify_mtel"></th>
                <th>机构等级</th>
                <th><input type="text" name="mlevel"></th>
            </tr>
            <tr>
                <th>机构类型</th>
                <th><input type="text" name="mtype"></th>
                <th>总床位数</th>
                <th><input type="text" name="mcount" id="modify_mcount"></th>
            </tr>
        </table>
    </form>
</div>
</body>
<script src="jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script src="js/easyui-lang-zh_CN.js"></script>
<script>
    var organ = {
        /*
        * value:这一列的数据的值
        * row:当前行的json数据
        * index:数据所在行的下标
        * */
        op_fmt: function (value, row, index) {
            return '<a href="#" class="organ_remove_btn">删除</a><a href="#" class="organ_showupdate_btn">修改</a>'

        }
    }
    //生效datagraid效果
    $("#datagrid_organ").datagrid({
        title: "机构列表",
        iconCls: "icon-man",
        height: 640,
        width:1348,
        url: "http://localhost:8080/organ/findAllOrgan",//自动请求url，自动创建tr，自动装载数据
        toolbar: '#datagrid_toolbar',//引用按钮组，使按钮组在datagrid里面
        rownumbers: true,//显示行号
        checkOnSelect: true,//只有复选框选中，这一行才会选中
        fitColumns: true,//让表格列宽，强行自适应整个页面宽度
        striped: true,//实现斑马线效果
        onLoadSuccess: function () {
            //datagrid数据加载完毕之后，执行的代码
            //
            $(".organ_remove_btn").linkbutton({
                iconCls: "icon-cancel",
                onClick:function (){
                    //获取当前行的id
                    alert("确定要删除吗？");
                    var mid = $(this).parent().parent().parent().children().eq(1).find("div").text();
                    $.post("/organ/delByMid",{"mid":mid},rs => {
                        if (rs.code == 200){
                            $("#datagrid_organ").datagrid('reload');
                            $.messager.show({
                                title:"提示信息",
                                msg:rs.data
                            });
                        }
                    });
                }
            });
            $(".organ_showupdate_btn").linkbutton({
                iconCls: "icon-edit",
                onClick:function (){
                    $("#dialog_organ_modify").dialog({
                        closed:false,
                    });
                    //获取当前行的数据的id值
                    var mid = $(this).parent().parent().parent().children().eq(1).find("div").text();
                    //ajax请求，根据id从控制器，获得对应的organ信息
                    //填充在form表单中“.load"
                    $("#form_organ_modify").form('load',"http://localhost:8080/organ/getByMid?mid="+mid);
                }
            });
        },
        pagination: true,//添加分页工具栏
    });
    /*生效databox*/
    $("#add_mdate").datebox({
        editable:false,
    });
    /*生效numberbox*/
    $("#add_mtel").numberbox({
        valid:'length[0,11]',
    });
    $("#add_mcount").numberbox({

    });
    /*生效databox*/
    $("#modify_mdate").datebox({
        editable:false,
    });
    /*生效numberbox*/
    $("#modify_mtel").numberbox({
        valid:'length[0,11]',
    });
    $("#modify_mcount").numberbox({

    });
    /*给linkbutton生效*/
    $("#datagrid_toolbar>a:contains(删除选中)").linkbutton({
        //icon是设置图标
        iconCls: "icon-remove",
        onClick: function () {
            //获取被选中行的数据
            var as = $("#datagrid_organ").datagrid('getChecked');
            //获取每一行的id，并按照格式拼接,id=1&id=2&id=3
            var param = "";
            for (var i = 0; i < as.length; i++) {
                var mid = as[i].mid;
                if (i == 0) {
                    param = param + "mid=" + mid;
                } else {
                    param = param + "&mid=" + mid;
                }
            }
            $.post("/organ/removeBatch", {"mids": param}, rs => {
                if (rs.code == 200) {
                    $("#datagrid_organ").datagrid('reload');
                    $.messager.show({
                        title: "提示",
                        msg: rs.data
                    })
                }
            });
        }

    });
    $("#datagrid_toolbar>a:contains(添加)").linkbutton({
        //icon是设置图标
        iconCls: "icon-add",
        onClick: function () {
            $("#dialog_organ_add").dialog({
                closed: false,//显示
                //实现灯罩效果,蒙版
                modal: true,
            })
        }
    });
    $("#keyword").textbox({
        buttonIcon: "icon-search",
        buttonText: "搜索",
        onClickButton:function (){
            //获取输入框中的值
            var mname = $("#keyword").val();
            //使用datagrid的load方法，发送请求,load方法自动发送datagrid的URL，再加上mname
            $("#datagrid_organ").datagrid('load',{mname:mname});
        }
    });
    $("#dialog_organ_add").dialog({
        title: "添加机构",
        width: 520,
        iconCls: "icon-man",
        buttons: "#dialog_organ_add_buttons",
        closed: true,//初始关闭
    });
    $("#dialog_organ_modify").dialog({
        width: 520,
        title:"修改机构xinx",
        iconCls:"icon-man",
        buttons: "#dialog_organ_modify_buttons",
        modal:true,//实现灯罩效果
        closed:true
    });
    $("#dialog_organ_modify_buttons a:contains(修改)").linkbutton({
        iconCls:"icon-ok",
        onClick:function (){
            //第一步，将数据提交到后台服务器
            $("#form_organ_modify").form('submit');
        }
    })
    $("#dialog_organ_add_buttons a:contains(添加)").linkbutton({
        iconCls: "icon-ok",
        onClick: function () {

            //第一步，将数据提交到后台服务器
            $("#form_organ_add").form('submit');
            //datagraid重新加载数据
        }
    });
    /*给organ的form表单添加*/
    $("#form_organ_add").form({
        //提交成功后的回调函数
        success: function (rs) {
            console.log(rs);
            var json = JSON.parse(rs);
            $.messager.show({
                title: "提示信息",
                msg: json.data
            });
            //将dialog关闭
            $("#dialog_organ_add").dialog({
                closed: true
            });
            //将当前datagrid重新加载
            $("#datagrid_organ").datagrid('reload');
            //清空表单
            $("#form_organ_add").form('clear');
        }
    });
    /*给organ的form表单修改*/
    $("#form_organ_modify").form({
        //提交成功后的回调函数
        success: function (rs) {
            console.log(rs);
            var json = JSON.parse(rs);
            $.messager.show({
                title: "提示信息",
                msg: json.data
            });
            //将dialog关闭
            $("#dialog_organ_modify").dialog({
                closed: true
            });
            //将当前datagrid重新加载
            $("#datagrid_organ").datagrid('reload');
            //清空表单
            $("#form_organ_modify").form('clear');
        }
    })
    /*居中*/
    $("#dialog_organ_add_buttons").css({"text-align": "center"})
</script>
</html>